<template>
  <div>
    <el-container>
      <el-aside width="200px" style="background-color: #667a7b;min-height:100vh">
        <el-menu :defaultActive="activeIndex" router uniqueOpened="true">
          <nuxt-link tag="li" to="/index0" class="nav_header"><i class="iconfont icon-logo"></i><span>商品管理系统</span></nuxt-link>
          <el-submenu index="1">
            <template slot="title"><i class="iconfont icon-shengchan"></i>生产</template>
            <el-menu-item index="/index0/productM">生产管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="iconfont icon-chuhuo"></i>商品包装</template>
            <el-menu-item index="/index0/flaskM">装盒管理</el-menu-item>
            <el-menu-item index="/index0/zhuangxiang">装箱管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="iconfont icon-guanli1"></i>信息管理</template>
            <el-menu-item index="/index0/box">箱子</el-menu-item>
            <el-menu-item index="/index0/school">学校</el-menu-item>
            <el-menu-item index="/index0/point">配送点</el-menu-item>
            <el-menu-item index="/index0/food">商品</el-menu-item>
            <el-menu-item index="/index0/addfood">配菜</el-menu-item>
            <el-menu-item index="/index0/addtaste">口味</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="iconfont icon-guanli"></i>综合管理</template>
            <el-menu-item index="/index0/user">用户管理</el-menu-item>
            <el-menu-item index="/index0/proxySh">代理管理</el-menu-item>
            <el-menu-item index="/index0/cashSh">提现管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main style="padding:0">
          <nuxt-child/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
};
</script>


<style lang="stylus">
.el-menu-item
  text-align center
.el-submenu.is-active .el-submenu__title
  border-bottom-color #e6e6e6

.el-menu-item.is-active
  background #f1f1f1
  color black
.el-submenu__title
  padding-left 33px
  border-bottom 1px solid #f1f1f1
  border-top 1px solid #f1f1f1

  i
    &:first-child
      font-size 24px
      padding-right 25px
    &:nuxt-child(3)
      padding-bottom 5px
.nav_header
  cursor pointer
  box-shadow 0px 1px 5px #ccc
  width 200px
  height 60px
  line-height 60px
  background #667a7b
  font-size 18px
  color #fff

  i
    font-size 30px
    padding-right 10px
    color #f4ea0c
    display inline-block
    width 60px
    text-align center
    height 100%
    float left
</style>
